<template>
  <el-container>
    <el-main>
      <el-form :inline="true" :model="groupPage">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="groupPage.keyword" placeholder="关键字" @keyup.enter.native="search"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="isActive">
          <el-select v-model="groupPage.isActive" placeholder="状态" @change="selectChange">
            <el-option label="全部" :value="''"></el-option>
            <el-option label="生效" :value="true"></el-option>
            <el-option label="失效" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" type="primary">查询</el-button>
          <el-button style="float:right" type="primary" @click="back()">返回群库</el-button>
        </el-form-item>
        <el-button style="float:right" type="primary" @click="dialogFormVisible = true">添加群</el-button>
      </el-form>
      <el-table :data="groupList" style="width: 100%">
        <el-table-column label="名字" prop="groupName"></el-table-column>
        <el-table-column label="序号" prop="sequence">
          <template slot-scope="scope">
            {{scope.row.sequence + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="所属群库" prop="groupCollection"></el-table-column>
        <el-table-column label="有效期" prop="effectiveTime">
          <template slot-scope="scope">
            {{formatTime(scope.row.effectiveTime)}}
          </template>
        </el-table-column>
        <el-table-column label="最大人数" prop="groupMemberNumber"></el-table-column>
        <el-table-column label="当前人数" prop="currentMemberNumber"></el-table-column>
        <el-table-column label="状态" prop="isActive">
          <template slot-scope="scope">
            <el-switch :disabled="isDisabled(scope.row)" v-model="scope.row.isActive" active-color="#13ce66" inactive-color="#ebebeb" @change="changeIsActive(scope.row.id, scope.row.isActive)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showDetail(scope.row.imageId)">预览</el-button>
            <el-button type="text" size="small" @click="showEditDialog(scope.row.id, scope.row.imageId)">编辑</el-button>
            <el-button type="text" size="small" @click="showMember(scope.row.id, $route.params.id)">群成员</el-button>
            <!-- <el-button type="text" size="small">换图</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          :current-page="groupPage.page + 1"
          :page-sizes="[10, 20, 100, 300, 400]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="groupPage.totalElement">
        </el-pagination>
      </div>
    </el-main>
    <el-dialog title="新增群" :visible.sync="dialogFormVisible" top="21vh" :before-close="closeDialogEvery">
      <el-form :model="groupForm" :rules="rules" ref="groupForm">
        <el-form-item label="群名称" :label-width="formLabelWidth" prop="groupName">
          <el-input v-model="groupForm.groupName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大人数" :label-width="formLabelWidth" prop="groupMemberNumber">
          <el-input v-model.number="groupForm.groupMemberNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="群二维码" :label-width="formLabelWidth">
          <!-- <el-input v-model="form.name" auto-complete="off"></el-input> -->
          <!--:http-request="handleRequest"-->
          <el-upload
            :headers="uploadHeader"
            class="upload-demo"
            ref="upload"
            list-type="picture"
            multiple
            :action="groupUploadUrl"
            :on-progress="handleProgress"
            :on-success="handleUploadImageOK"
            :on-remove="handleRemove"
            :before-upload="checkSame"
            :file-list="fileList"
            :on-change="handleChange"
            accept="image/jpg,image/jpeg,image/png">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button> -->
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，待文件上传完成后可拖动顺序</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="微信名" :label-width="formLabelWidth"  prop="groupWechatId">
          <el-col :span="6">
            <el-select v-model="ifAddWx" @change="changeAddWx">
              <el-option label="默认" value="默认"></el-option>
              <el-option label="添加微信号" value="添加微信号"></el-option>
            </el-select>
          </el-col>
          <el-col :span="17" :offset="1">
            <el-input v-if="ifAddWx==='添加微信号'" v-model="groupForm.groupWechatId" auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="有效期" :label-width="formLabelWidth" prop="effectiveTime">
          <el-date-picker v-model.number="groupForm.effectiveTime" type="date" placeholder="选择日期" value-format="timestamp"></el-date-picker>
          <div>群二维码在有效期前会在群库中展示</div>
          <!-- <el-input v-model="groupForm.effectiveTime" auto-complete="off"></el-input> -->
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="isActive">
          <el-switch v-model="groupForm.isActive" active-color="#13ce66" inactive-color="#ebebeb"></el-switch>
          <!-- <el-radio v-model="groupForm.isActive" :label="true">生效</el-radio>
          <el-radio v-model="groupForm.isActive" :label="false">失效</el-radio> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('groupForm')">取 消</el-button>
        <el-button type="primary" @click="formSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 群预览 -->
    <!-- <el-dialog title="群预览" :visible.sync="dialogDetail" top="30vh" width="30%">
      <div style="text-align: center;">
        <img class="avatar" :src="groupDetail.imageData" :alt="groupDetail.fileName">
        <p>扫描二维码，预览课程</p>
      </div>
    </el-dialog> -->
    <!-- 编辑群 -->
    <el-dialog title="编辑群" :visible.sync="editDialogFormVisible" :before-close="closeDialogEvery">
      <el-form :model="editGroupForm" :rules="rules" ref="editGroupForm">
        <el-form-item label="群名称" :label-width="formLabelWidth" prop="groupName">
          <el-input v-model="editGroupForm.groupName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="最大人数" :label-width="formLabelWidth" prop="groupMemberNumber">
          <el-input v-model.number="editGroupForm.groupMemberNumber" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="群二维码" :label-width="formLabelWidth" required="">
          <img class="avatar" :src="groupDetail.imageData" :alt="groupDetail.fileName">
          <el-upload
            :headers="uploadHeader"
            class="upload-demo"
            ref="editUpload"
            :action="groupUploadUrl"
            :on-success="handleUploadImageOKEdite"
            :on-remove="handleEditRemove"
            :file-list="fileList"
            :on-exceed="handleExceed"
            :on-change="handleChangeEdit"
            :show-file-list='isshowlist'
            list-type="picture"
            accept="image/jpg,image/jpeg,image/png">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="微信名" :label-width="formLabelWidth"  prop="groupWechatId">
          <el-col :span="6">
            <el-select v-model="ifAddWxEdid" @change="changeEditWx">
              <el-option label="默认" value="默认"></el-option>
              <el-option label="添加微信号" value="添加微信号"></el-option>
            </el-select>
          </el-col>
          <el-col :span="11" :offset="1">
            <el-input v-if="ifAddWxEdid==='添加微信号'" v-model="editGroupForm.groupWechatId" auto-complete="off"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="有效期" :label-width="formLabelWidth" prop="effectiveTime">
          <el-date-picker v-model.number="editGroupForm.effectiveTime" :default-value="editGroupForm.effectiveTime" type="date" placeholder="选择日期" value-format="timestamp"></el-date-picker>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth" prop="isActive">
          <el-switch v-model="editGroupForm.isActive" active-color="#13ce66" inactive-color="#ebebeb"></el-switch>
          <!-- <el-radio v-model="editGroupForm.isActive" :label="true">生效</el-radio>
          <el-radio v-model="editGroupForm.isActive" :label="false">失效</el-radio> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('editGroupForm')">取 消</el-button>
        <el-button type="primary" @click="editFormSubmit">确 定</el-button>
      </div>
    </el-dialog>

    <!--群成员列表-->
    <el-dialog title="群成员" :visible.sync="qunkuRember">
      <el-table :data="remberList" style="width: 100%">
        <el-table-column label="昵称" prop="nickName"></el-table-column>
        <el-table-column label="头像">
          <template slot-scope="scope">
            <img style="width: 40px;height: 40px;" :src="scope.row.headImgUrl" alt="">
          </template>
        </el-table-column>
        <el-table-column label="openId" prop="openId"></el-table-column>
        <el-table-column label="进群时间" prop="createdTime"></el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          background
          @size-change="handlePageSizeChange1"
          @current-change="handleCurrentPageChange1"
          :current-page="remberPage + 1"
          :page-sizes="[10, 20, 100, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="remberTotalElement">
        </el-pagination>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qunkuRember = false">确 定</el-button>
      </div>
    </el-dialog>
    <img :src="prestrainImg" alt="" id = "prestrain" style="width: 1px;height: 1px;" />
  </el-container>
</template>

<script>
  /* eslint-disable */
  import moment from 'moment';
  import CONSTANT from '../../constant/common';
  import auth from '../../util/auth';
  const $ = require('jquery');
  import service from '../../service/group';

  export default {
    data() {
      return {
        remberList: [],
        remberPage: 0,
        remberSize: 10,
        remberTotalElement: 0,
        qunkuRember: false,
        ifAddWx: '默认',
        ifAddWxEdid: '默认',
        isshowlist: false,
        prestrainImg: '',
        uploadHeader: {
          Authorization: auth.getToken(),
        },
        editDialogFormVisible: false,
        dialogFormVisible: false,
        // dialogDetail: false,
        groupDetail: {
          imageData: '',
          fileName: '',
        },
        groupPage: {
          groupCollectionId: this.$route.params.id,
          page: 0,
          size: 20,
          keyword: '',
          isActive: '',
          totalElement: 1,
        },
        groupForm: {
          groupCollectionId: this.$route.params.id,
          groupName: '',
          groupMemberNumber: '',
          effectiveTime: +new Date() + (3600 * 24 * 7 * 1000),
          qrCodeImages: [],
          groupWechatId: null,
          isActive: true,
        },
        editGroupForm: {
          groupCollectionId: this.$route.params.id,
          groupName: '',
          groupMemberNumber: '',
          groupWechatId: null,
          effectiveTime: '',
          qrCodeImages: [],
          imageData: '',
          fileName: '',
          imageId: '',
          isActive: true,
        },
        rules: {
          groupName: [
            {
              required: true, message: '请输入群名称，最大30个汉字', max: 30, trigger: 'blur',
            },
          ],
          groupMemberNumber: [
            {
              type: 'number', message: '数值必须小于等于99999且大于0', max: 99999, min: 1,
            },
            { required: true, message: '请输入最大值人数', trigger: 'blur' },
          ],
          effectiveTime: [
            { required: true, message: '请选择日期', trigger: 'blur' },
          ],
          qrCodeImages: [
            { required: true, message: '请上传群图片', trigger: 'blur' },
          ],
          isActive: [
            { required: true, message: '请选择状态', trigger: 'blur' },
          ],
        },
        fileList: [],
        localFileList: [],
        loading: false,
        formLabelWidth: '100px',
        publicGroupId: '',
        groupCollectionId: ''
      };
    },
    computed: {
      groupList() {
        return this.$store.state.group.groupList;
      },
      groupUploadUrl() {
        return `${CONSTANT.REQUEST_URL}/api/group/uploadImage`;
      },
    },
    mounted() {
      const param = this.groupPage;
      this.$store.dispatch('getGroup', param).then((res) => {
        this.groupPage.totalElement = res.page.totalElement;
      });
    },
    updated() {
      const liList = document.querySelectorAll('.el-upload-list__item');
      const that = this;
      window.dragElement = null;
      liList.forEach((item, index) => {
        item.setAttribute('draggable', true);
        item.ondragstart = (e) => {
          // 记录的拖动节点
          window.dragElement = item;
          e.dataTransfer.setData('text/html', item.innerHTML);
          e.dataTransfer.setData('textIndex', index);
        };
        item.ondragover = (e) => {
          // 不执行无法进入drop事件
          e.preventDefault();
        };
        item.ondrop = () => {
          if (window.dragElement !== item) {
            const nIndex = +$(item).index();
            // 被插入的节点交换元素值
            const dragIndex = +$(window.dragElement).index();
            const dragFormItem = that.groupForm.qrCodeImages[dragIndex];
            const fileListItem = that.fileList[dragIndex];
            // 移除数组的
            that.groupForm.qrCodeImages.splice(dragIndex, 1);
            that.fileList.splice(dragIndex, 1);
            that.groupForm.qrCodeImages.splice(nIndex, 0, dragFormItem);
            that.fileList.splice(nIndex, 0, fileListItem);
          }
          // const a = that.groupForm.qrCodeImages.map(qrItem => qrItem.imageName);
          // console.log('TCL: item.ondrop -> a', a);
          // console.log('flistlist', this.fileList);
        };
      });
    },
    methods: {
      isDisabled(row) {
        return row.currentMemberNumber >= row.groupMemberNumber || +new Date(row.effectiveTime) <= +new Date()
      },
      showMember(publicGroupId, groupCollectionId) {
        if(publicGroupId) {
          this.publicGroupId = publicGroupId
        }
        if(groupCollectionId) {
          this.groupCollectionId = groupCollectionId
        }
        this.qunkuRember = true
        const data = {
          publicGroupId: this.publicGroupId,
          groupCollectionId: this.groupCollectionId,
          page: this.remberPage,
          size: this.remberSize
        }
        service.getQunKuMember(data).then((res) => {
          this.remberList = res.groupCollectionOpenIdResponses
          this.remberTotalElement = res.page.totalElement
        })
      },
      changeAddWx() {
        if (this.ifAddWx === '默认') {
          this.groupForm.groupWechatId = null;
        }
      },
      changeEditWx() {
        if (this.ifAddWxEdid === '默认') {
          this.editGroupForm.groupWechatId = null;
        }
      },
      handleExceed(files) {
        console.log(files);
      },
      /* eslint-disable */
      checkSame(file) {
        const that = this;
        for (let i = 0; i < that.fileList.length; i += 1) {
          if (that.fileList[i].name === file.name) {
            that.$message.error('禁止上传相同的图片');
            return false
          }
        }
      },
      handleUploadImageOK(res, file, fileList) {
        const that = this;
        fileList.map((item, index) => {
          if (item.name === file.name) {
            that.groupForm.qrCodeImages[index] = {
              imageName: file.name,
              imageId: +res.data.imageId,
            };
          }
          return true;
        });
        this.fileList = fileList;
      },
      handleUploadImageOKEdite(res, file, fileList) {
        this.fileList = fileList;
        this.editGroupForm.imageId = res.data.imageId;
        this.groupDetail.imageData = res.data.imageURL;
      },
      handleChangeEdit(file, fileList) {
        console.log(file, fileList);
      },
      // 更改列表状态
      changeIsActive(groupId, isActive) {
        const param = {
          groupId,
          isActive,
        };
        this.$store.dispatch('changeGroupActive', param).then(() => {
          this.$message({
            type: 'success',
            message: '更改状态成功',
          });
        });
      },
      back() {
        this.$router.push('/group-collection');
      },
      // 上传修改的图片并显示
      handleEditRequest(param) {
        this.$refs.editGroupForm.validate().then(() => {
          const reader = new FileReader();
          reader.readAsDataURL(param.file);
          reader.onload = (fileReaderObj) => {
            const fileString = fileReaderObj.target.result;
            this.$store.dispatch('uploadImg', {
              fileName: param.file.name,
              imageData: fileString,
            }).then((res) => {
              // console.log(res);
              this.fileList.push({
                name: param.file.name,
                url: fileString,
                imageId: +res.imageId,
              });
              this.editGroupForm.imageId = +res.imageId;
              this.groupDetail.imageData = fileString;
            });
          };
        });
      },
      editFormSubmit() {
        const param = this.editGroupForm;
        console.log(param);
        this.$refs.editGroupForm.validate().then(() => {
          this.$store.dispatch('editGroupDetail', param).then(() => {
            this.$message({
              type: 'success',
              message: '修改群成功',
            });
            this.closeDialog('editGroupForm');
            // 清空图片数组
            this.editGroupForm.qrCodeImages = [];
            // 获取数据
            this.$store.dispatch('getGroup', this.groupPage).then((res) => {
              this.groupPage.totalElement = res.page.totalElement;
              console.log(res);
            });
            // window.location.reload();
          });
        });
      },
      showEditDialog(groupId, imageId) {
        this.$message({
          duration: 0,
          message: '数据获取中请稍候...',
        });
        this.$store.dispatch('getGroupDetail', { groupId }).then((res) => {
          res.groupId = groupId;
          res.effectiveTime = moment(res.effectiveTime).unix() * 1000;
          res.qrCodeImages = [res.imageId];
          if(res.groupWechatId){
            this.ifAddWxEdid = '添加微信号';
          } else {
            this.ifAddWxEdid = '默认';
          }
          this.editGroupForm = res;
          console.log(this.editGroupForm);
        });
        this.$store.dispatch('getGroupImgById', { imageId }).then((imgRes) => {
          this.groupDetail.imageData = imgRes.imageData;
          this.groupDetail.fileName = imgRes.fileName;
          this.editDialogFormVisible = true;
          this.$message.closeAll();
        });
      },
      formatTime(stamp) {
        return moment(stamp).format('YYYY-MM-DD HH:mm:ss');
      },
      showDetail(imageId) {
        const param = {
          imageId,
        };
        this.$store.dispatch('getGroupImgById', param).then((res) => {
          const that = this;
          // this.dialogDetail = true;
          this.groupDetail.imageData = res.imageData;
          this.groupDetail.fileName = res.fileName;
          if (this.prestrainImg === res.imageData) {
            that.$msgbox({
              center: true,
              message: `<img src="${that.groupDetail.imageData}" alt="${that.groupDetail.fileName}"><p>扫描二维码，预览群</p>`,
              title: '群预览',
              dangerouslyUseHTMLString: true,
              showConfirmButton: false,
              customClass: 'img-center',
            }).catch(() => {
            });
          } else {
            this.prestrainImg = res.imageData;
            document.getElementById('prestrain').onload = function () {
              that.$msgbox({
                center: true,
                message: `<img src="${that.groupDetail.imageData}" alt="${that.groupDetail.fileName}"><p>扫描二维码，预览群</p>`,
                title: '群预览',
                dangerouslyUseHTMLString: true,
                showConfirmButton: false,
                customClass: 'img-center',
              }).catch(() => {
              });
            };
          }
          console.log(res);
        });
      },
      selectChange(val) {
        this.groupPage.isActive = val;
      },
      handlePageSizeChange(size) {
        const param = this.groupPage;
        param.size = size;
        this.$store.dispatch('getGroup', param).then((res) => {
          this.groupPage.totalElement = res.page.totalElement;
          console.log(res);
        });
      },
      handleCurrentPageChange(page) {
        const param = this.groupPage;
        param.page = page - 1;
        this.$store.dispatch('getGroup', param).then((res) => {
          this.groupPage.totalElement = res.page.totalElement;
          console.log(res);
        });
      },
      handlePageSizeChange1(size) {
        this.remberSize = size;
        this.showMember();
      },
      handleCurrentPageChange1(page) {
        this.remberPage = page - 1;
        this.showMember();
      },
      search() {
        this.groupPage.page = 0;
        this.groupPage.size = this.groupPage.keyword ? this.groupPage.size : 20;
        this.groupPage.keyword = this.groupPage.keyword.trim()
        const param = this.groupPage;
        this.$store.dispatch('getGroup', param).then((res) => {
          this.groupPage.totalElement = res.page.totalElement;
          this.groupPage.page = res.page.currentPage + 1;
          console.log(res);
        });
      },
      // 关闭添加群窗口
      closeDialog(formName) {
        this.$refs[formName].resetFields();
        this.fileList = [];
        this.dialogFormVisible = false;
        this.editDialogFormVisible = false;
        this.loading = false;
        this.ifAddWx = '默认';
        this.ifAddWxEdid = '默认';
        // this.dialogDetail = false;
      },
      closeDialogEvery() {
        this.fileList = [];
        this.groupForm.qrCodeImages = [];
        this.dialogFormVisible = false;
        this.editDialogFormVisible = false;
        this.loading = false;
      },
      handleProgress(event, file, fileList) {
        console.log('progress', event, file, fileList);
      },
      handleChange(file, fileList) {
        this.loading = true;
        if (fileList.length > 0) this.localFileList = fileList;
        console.log('​handleChange -> his.localFileList', this.localFileList.length);
      },
      // 移除图片id
      handleRemove(file, fileList) {
        const newQrCodeImageId =
          this.groupForm.qrCodeImages.filter(item => (item.imageId !== file.response.data.imageId));
        this.groupForm.qrCodeImages = newQrCodeImageId;
        // const a = this.groupForm.qrCodeImages.map(qrItem => qrItem.imageName);
        // console.log('remove -> a', a);
        this.fileList = fileList;
      },
      // 移除图片id
      handleEditRemove(file, fileList) {
        const newQrCodeImageId = this.editGroupForm.qrCodeImages
          .filter(item => (item !== file.imageId));
        this.editGroupForm.qrCodeImages = newQrCodeImageId;
        this.fileList = fileList;
        this.groupDetail.imageData = '';
        this.groupDetail.fileName = '';
        console.log('remove', file, fileList);
      },
      // 上传图片并显示
      handleRequest(param) {
        const reader = new FileReader();
        reader.readAsDataURL(param.file);
        reader.onload = (fileReaderObj) => {
          const fileString = fileReaderObj.target.result;
          this.$store.dispatch('uploadImg', {
            fileName: param.file.name,
            imageData: fileString,
          }).then((res) => {
            // console.log(res);
            this.fileList.push({
              name: param.file.name,
              url: fileString,
              imageId: +res.imageId,
            });
            this.groupForm.qrCodeImages.push({
              imageName: param.file.name,
              imageId: +res.imageId,
            });
            if (this.fileList.length === this.localFileList.length) {
              this.loading = false;
            }
            console.log('​reader.onload -> this.localFileList.length', this.localFileList.length);
            console.log('​reader.onload -> this.fileList.length', this.fileList.length);
          });
        };
      },
      formSubmit() {
        const param = this.groupForm;
        if (this.fileList.length < 1) {
          this.$message({
            type: 'warning',
            message: '请至少上传一张图片',
          });
          return;
        }
        this.$refs.groupForm.validate().then(() => {
          console.log(param);
          this.$store.dispatch('addGroup', param).then(() => {
            this.$message({
              type: 'success',
              message: '创建新群成功',
            });
            this.closeDialog('groupForm');
            // 清空图片数组
            this.groupForm.qrCodeImages = [];
            // 获取数据
            this.$store.dispatch('getGroup', this.groupPage).then((res) => {
              this.groupPage.totalElement = res.page.totalElement;
              console.log(res);
            });
          });
        });
      },

      // handleChange(file, fileList) {
      //   const isLt2M = file.size / 1024 / 1024 < 2;
      //   if (!isLt2M) {
      //     this.$message.error('上传头像图片大小不能超过 2MB!');
      //     this.fileList.filter((obj) => {
      //       console.log(obj);
      //       return obj;
      //     });
      //   }
      //   console.log('handleChange', file, fileList);
      //   return isLt2M;
      // },
    },
  };
</script>

<style>
  .page {
    margin-top: 20px;
    text-align: right;
  }
  .img-center img {
    width: 320px;
    height: 100%;
  }
  .avatar {
    width: 150px;
    height: 150px;
  }
</style>

